<template>
	<view>
		<radio-group @change="chooseAddress" v-if="addressList.length>0">
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,index) in addressList" :key="index">
					<view class="cu-avatar lg cuIcon-locationfill main-color"></view>
					<view class="content">
						<view>{{item.consignee}} {{item.phone}}</view>
						<view class="text-gray">{{item.province}} {{item.city}} {{item.district}} {{item.address}}</view>
						<view class="text-gray text-sm" v-if="item.defaultAddress">默认地址</view>
					</view>
					<view class="action text-gray">
						<label>
							<radio class='red' :value="item.id"></radio>
						</label>
					</view>
				</view>
			</view>
		</radio-group>
		<view v-else class="text-center text-gray margin-top-100">收货地址为空哦!</view>
		<view class="add-section">
			<button class="btn round main-bg-color" @click="toAdd">新增收货地址</button>
		</view>
	</view>
</template>

<script>
	import {UserService} from "@/api/UserService.js"
	export default {
		data() {
			return {addressList:[]}
		},
		onPullDownRefresh() {
			this.loadAddress();
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.loadAddress();
		},
		methods: {
			toAdd(){
				uni.navigateTo({
					url:"/pages/home/address/add"
				});
			},
			loadAddress(){
				UserService.getAddress().then(res=>{
					this.addressList=res;
				});
			},
			chooseAddress(e){
				const addressId=parseInt(e.detail.value);
				const address=this.addressList.find(function(item){
					return addressId===parseInt(item.id);
				});
				uni.$emit("chooseAddressEvent",address);
				uni.navigateBack({});
			}
		}
	}
</script>

<style lang="scss">
	radio-group{width: 100%;}
.cu-list {
	.cu-item {
		height: 180rpx !important;
		.cu-avatar{
			background: none !important;
		}
	}
}
.add-section{
	width:100%;
	text-align:center;
	position: fixed;
	bottom: 100rpx;
	button{
		width:80%;
	}
}
</style>
